<template>
	<view>
		<view>
			<view :class="[detailList.punishStatus==0?'leaveNav':'dormitoryNav']">
				<view style="font-weight: 800;font-size: 39rpx;">学生详情
					<view class="leaveLine"></view>
				</view>
				<button class="leaveBtn" v-if="detailList.punishStatus==0" @click="leaveBtnFun()">处理</button>
			</view>
			<view>
				<view class="displayStudentInfo">
					<view style="color:#666;margin-bottom:20rpx;font-weight: 800;">
						学员基本信息
					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;">
						姓名：{{detailList.studentName}}
						<view style="position: absolute;top:80rpx;right:150rpx">
							<image style="width:180rpx;height:230rpx" :src="detailList.studentPhoto"></image>
						</view>

					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;" v-if="detailList.sex==0">
						性别：男
					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;" v-else>
						性别：女
					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;">
						班级：{{detailList.className}}
					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;">
						班主任：{{detailList.username}}
					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;" @click="callFun(detailList.phone)">
						联系方式：{{detailList.phone}}
					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;" class="attendanceLine"></view>
					<view
						style="width:600rpx;color:#666;margin-bottom:20rpx;font-weight: 800;display: flex;justify-content: space-between;align-content: space-between;">
						<view> 违纪情况</view>
						<view style="color:#8F8F94;margin-top:10rpx;font-size: 24rpx;font-weight: 0;">
							{{detailList.dvDate}}
						</view>
					</view>
					<view style="color:#8F8F94;margin-bottom:20rpx;">
						【{{dvType}}】<textarea class="repText" v-model="detailList.dvDesc">  </textarea>
						<view style="margin-top:-10rpx" v-if="detailList.photo">
							<image style="border-radius: 10rpx;" :src="detailList.photo"></image>
						</view>
					</view>

				</view>

				<view v-if="detailList.punishStatus" style="margin-left:50rpx;">
					<view style="margin-top:60rpx;color:#666;margin-bottom:20rpx;font-weight: 800;"> 处理情况 </view>
					<view style="color:#8F8F94;margin-bottom:20rpx;">
						【{{dvType}}】<textarea class="repText" v-model="detailList.punishDesc">  </textarea>
						<view style="margin-top:60rpx" v-if="detailList.fileImg">
							<image style="border-radius: 10rpx;" :src="detailList.fileImg"></image>
						</view>

						<view v-else>
							<view class="repDevice" style="position: relative;top:180rpx;left:200rpx">上传照片</view>
							<image @click="chooseImage" :src="imgShow" class="imgSty" mode=""></image>
						</view>

					</view>
				</view>

			</view>
		</view>
		<!-- <my-bottom :topName="topName" :bottomArr="attendanceArr" :bottomName="bottomName"></my-bottom> -->
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '../../utils/index.js'
	import topCom from '../component/topCom.vue'
	import bottomCom from '../component/bottom.vue'
	import * as imageConversion from 'image-conversion'
	export default {
		data() {
			return {
				bottomName: 'home',
				detailList: "",
				file: undefined,
				userName: '',
				topName: '违纪历史记录',
				showFresh: 'true',
				punishDesc: '',
				dvType: "",
				schoolDv: [{
					id: 1,
					title: "着装",
					isShow: false,
				}, {
					id: 2,
					title: "睡觉",
					isShow: false,
				}, {
					id: 3,
					title: "玩游戏",
					isShow: false,
				}, {
					id: 4,
					isShow: false,
					title: "外出"
				}, {
					id: 5,
					isShow: false,
					title: "抽烟"
				}, {
					id: 7,
					title: "迟到",
					isShow: false,
				}, {
					id: 8,
					title: "未戴校牌",
					isShow: false,
				}, {
					id: 9,
					title: "未穿校服",
					isShow: false,
				}, {
					id: 10,
					title: "携带外卖",
					isShow: false,
				}, {
					id: 11,
					title: "校园抽烟",
					isShow: false,
				}, {
					id: 12,
					title: "打架斗殴",
					isShow: false,
				}, {
					id: 13,
					title: "饮酒酗酒",
					isShow: false,
				}, {
					id: 14,
					title: "打牌赌博",
					isShow: false,
				}, {
					id: 15,
					title: "翻爬围墙",
					isShow: false,
				}, {
					id: 16,
					title: "谩骂他人",
					isShow: false,
				}, {
					id: 17,
					title: "携带违禁品",
					isShow: false,
				}, , {
					id: 18,
					title: "宿舍抽烟",
					isShow: false,
				}, {
					id: 6,
					title: "其他",
					isShow: false,
				}, ],
				indexArr: [{
					icon: '',
					indexName: '校园巡查违纪登记'
				}, {
					icon: '',
					indexName: '宿舍违纪登记'
				}, ],
				attendanceArr: [{
						name: 'home',
						icon: 'iconfont icon-yonghutongji',
						text: "违纪",
						path: '/pages/instructor/instructorIndex'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/pages/instructor/instructorIndex'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/pages/instructor/instructorIndex'
					}
				],
				imgShow: "",
				id: 0,
			}
		},
		onShow() {
			var that = this
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					that.userName = res.data
				}
			})
			// this.getDvDetailById()
		},
		mounted() {
			this.getDvDetailById()
		},
		components: {
			topCom,
			bottomCom
		},
		onLoad(options) {
			this.id = options.id
		},
		methods: {
			
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async res => {
						
						this.imgShow = res.tempFilePaths[0]; //500kb
						this.file = await imageConversion.compressAccurately(res.tempFiles[0], 500)

					}

				})
			},
			leaveBtnFun() {
				// alert(this.file)
				
				if ( this.imgShow) {
					
					uni.uploadFile({
						url: uni.url + "common/uploadFile",
						filePath: this.imgShow,
						name: "file",
						formData:{
							name:'admin'
						},
						file: this.file,
						success: (res) => {
							
							
							// console.log(JSON.parse(res.data).data);
							setTimeout(function() {
								uni.hideLoading();
							}, 2000);
							this.$api.instructor.updatePunishStatus(this.id, 1, 1, JSON.parse(res.data).data, "违纪检讨").then(
								res => {
									uni.showToast({
										title: "修改成功"
									})
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/instructor/historyList'
										})
									}, 1000)

								})
						},
						fail: (res) => {
							console.log(res);
						}
					})
				} else {
					this.$api.instructor.updatePunishStatus(this.id, 1, 1, "违纪检讨").then(
						res => {
							uni.showToast({
								title: "修改成功"
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/instructor/historyList'
								})
							}, 1000)

						})
				}


				// let base64 = {
				// 	              dataURL:this.imgShow,//用url方式表示的base64图片数据
				// 	              type: 'image/jpeg'//文件类型
				// 	            }
				// var img=this.convertBase64UrlToBlob(base64)		
				// imageConversion.compressAccurately(img, 500).then(res=>{
				// 	 let test = Symbol('test');
				// 	 var name1 = test.toString().concat('.jpeg')
				// 	 res = new File([res], name1, { type: res.type, lastModified: Date.now() })
				// 	 var form = new FormData();
				// 	 form.append("file", res);	
				// 	 this.$http.post('common/uploadFile',form).then(res=>{
				// 		 this.$api.instructor.updatePunishStatus(this.id,1,1,res.data.data,"违纪检讨").then(res=>{
				// 		 	uni.showToast({
				// 		 		title:"修改成功"
				// 		 	})
				// 			setTimeout(()=>{
				// 				uni.navigateTo({
				// 						url:'/pages/instructor/historyList'
				// 					})
				// 			},1000)	
				// 		 })
				// 	 })

				// })

			},
			callFun(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			getDvDetailById() {
				if (this.imgShow == '') {
					uni.showLoading({
						mask: true
					})
				}
				this.$api.instructor.getDvDetailById(this.id).then(res => {
					this.detailList = res.data;
					// console.log(res.data,898);
					if (res.data.photo) {
						this.detailList.photo = 'data:image/gif;base64,' + res.data.photo
					} else {
						this.detailList.photo = null
					}
					if (res.data.fileImg) {
						this.detailList.fileImg =
							`${this.$baseAppUrl}common/downloadFileImg?filename=${res.data.fileImg}`
					} else {
						this.detailList.fileImg = null
					}
					this.schoolDv.forEach((item) => {
						if (item.id == this.detailList.dvType) {
							this.dvType = item.title
						}
						uni.hideLoading();
					})
					this.$forceUpdate()
				})
			}
		}
	}
</script>

<style>
	.repDevice {
		text-align: left;
		font-size: 36rpx;
		color: #808080;
		padding-left: 45rpx;
	}

	.imgSty {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 590rpx;
		height: 300upx;
		margin: auto;
		padding: 10upx;
		margin-top: 0rpx
	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding: 50rpx;
		margin-bottom: -50rpx;
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		width: 220upx;
		height: 70upx;
		color: white;
		font-size: 32rpx;
		font-weight: 0;
		line-height: 70rpx;
	}

	.repText {
		/* border: solid 1upx #999999; */
		border-radius: 20upx;
		width: 610rpx;
		height: 150upx;
		word-wrap: break-word;
		padding: 5px;
		margin-left: -10rpx;
	}

	.attendanceLine {
		width: 600rpx;
		height: 2rpx;
		background-color: #8F8F94;
	}

	.displayStudentInfo {
		position: relative;
		top: 50rpx;
		left: 50rpx;

	}

	.dormitoryNav {
		color: #0000FF;
		margin-left: 80rpx;
		margin-top: 30rpx;


	}

	.leaveLine {
		width: 200upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10rpx;
		left: -30upx;
	}
</style>
